<template>
  <div>
    <h1 style="color: #1f9cd8;">购买流量点</h1>
    <div class="_top" style="">
      <div class="ts" style="">
        温馨 <br/>
        提示
      </div>
      <div class="_right" style="float: left">
        <p style="line-height: 30px;font-size: 16px;font-weight: bold;color: #FE0A00;">充值流量点注意事项</p>
        <p style="line-height: 24px;font-size: 14px;">1.商家发布任务需要购买流量点作为给买手的佣金及平台的服务费。</p>
        <p style="line-height: 24px;font-size: 14px;">2.商家购买的流量点不能当押金使用和不可转移成押金。</p>
        <p style="line-height: 24px;font-size: 14px;">3.流量点，不可提现、只能在平台消费。</p>
      </div>
    </div>
    <div style="padding-top: 20px;">
      <b style="display: block;font-size: 16px;height: 25px;line-height: 15px;">温馨提示：</b>
      <p style="font-size: 12px; color: #f00; line-height: 150%; margin: 0;">1、商家发布任务需要购买流量点做为给买手的佣金及平台的服务费、商家购买的流量点不能当押金使用、也不可提现、商家只能在平台消费</p>
    </div>
    <div>
      <h3>1.选择流量点包</h3>
      <div class="box">
        <div class="open" :style="bor1" @click="open(1)">
          <div>
            <h3>100流量点体验包</h3>
            <em>100元</em>
          </div>
        </div>
        <div class="open" :style="bor2" @click="open(2)">
          <div>
            <h3>500流量点体验包</h3>
            <em>500元</em>
          </div>
        </div>
        <div class="open" :style="bor3" @click="open(3)">
          <div>
            <h3>1000流量点体验包</h3>
            <em>1000元</em>
          </div>
        </div>
        <div class="open" :style="bor4" @click="open(4)">
          <div>
            <h3>2000流量点体验包</h3>
            <em>2000元</em>
          </div>
        </div>
      </div>
      <div style="height: 44px; width: 948px; line-height: 44px;border-bottom: 1px solid #f2f2f2;background: #f7fceb; padding: 0 15px;font-size: 14px;">
        <span style="float: left;">您已选择购买{{pay}}流量点体验包</span>
        <span style="float: right; font-size: 18px;">需支付：{{pay}}元</span>
      </div>
      <h3 style="font-size: 18px; margin-bottom: 20px;">2.支付</h3>
      <div style="height: 44px; width: 948px; line-height: 44px;border-bottom: 1px solid #f2f2f2;background: #f7fceb; padding: 0 15px;font-size: 14px;">
        <el-checkbox style="float: left;" v-model="checked" disabled></el-checkbox>
        <span style="">&nbsp;&nbsp;&nbsp;&nbsp;使用押金支付 (可用押金：{{userInfo.money * 1}}元)</span>
        <span style="float: right; font-size: 18px;">支付：{{pay}}元</span>
      </div>
    </div>
    <div style="height: 30px;"></div>
    <el-button style="margin-left: 400px;" type="warning">立即购买</el-button>
  </div>
</template>

<script>
  export default {
    name: "AdminLiuld",
    data(){
      return{
        checked:true,
        bor1:'border: 4px solid #17BAF5;',
        bor2:'',
        bor3:'',
        bor4:'',
        pay:100,
        userInfo:{}
      }
    },
    methods:{
      open(n){
        if (n == 1){
          this.pay = 100
          this.bor1 = 'border: 4px solid #17BAF5;'
          this.bor2 = ''
          this.bor3 = ''
          this.bor4 = ''
        } else if (n == 2){
          this.pay = 500
          this.bor2 = 'border: 4px solid #17BAF5;'
          this.bor1 = ''
          this.bor3 = ''
          this.bor4 = ''
        } else if (n == 3){
          this.pay = 1000
          this.bor3 = 'border: 4px solid #17BAF5;'
          this.bor1 = ''
          this.bor2 = ''
          this.bor4 = ''
        } else if (n == 4){
          this.pay = 2000
          this.bor4 = 'border: 4px solid #17BAF5;'
          this.bor1 = ''
          this.bor2 = ''
          this.bor3 = ''
        }
      },
      getUserInfo() {
        let _this = this;
        _this.$http
          .post("/api/api.php", {
            id: "getUserInfo"
          })
          .then(function (response) {
            _this.userInfo = response.data.data;
          });
      },
    },
    created(){
      this.getUserInfo()
    }
  }
</script>

<style scoped>
._top{
  width: 1201px;
  height: 145px;
  background-image: url('../../assets/bg.png');
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 60px;
}
.ts{
  float: left;
  width: 120px;
  height: 95px;
  padding-top: 40px;
  padding-left: 20px;
  font-size: 23px;
  font-weight: bold;
  color: #FE0A00;
}
._right{
  padding-top: 20px;
}
._right p{
  margin: 0;
}
  .box{
    height: 190px;
    width: 948px;
    margin: 15px 0 35px;
    background-color: #fff;
    border: 1px solid #E4E4E4;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.09), 0 5px 15px rgba(0,0,0,.05);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.09), 0 5px 15px rgba(0,0,0,.05);
    box-shadow: 0 0 5px rgba(0,0,0,.09), 0 5px 15px rgba(0,0,0,.05);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
  }
  .open{
    width: 236px;
    height: 188px;
    position: relative;
    cursor: pointer;
    border-right: 1px solid #F2F2F2;
    float: left;
  }
  .open div{
    height: 189px;
    float: left;
    width: 236px;
  }
.open div h3{
  margin: 0;
  text-align: center;
  padding-top: 60px;
  font-size: 18px;
  color: #1f9cd8;
  padding-bottom: 8px;
}
.open div em{
  display: block;
  color: #de0000;
  font-size: 20px;
  text-align: center;
}
</style>
